
import * as React from 'react'
import { View } from '@tarojs/components'
import { ReactPullLoad, STATS } from './ReactPullLoad'
type Prop = {
    /**滚动方向，默认垂直滚动 */
    scrollY?: boolean,
    /**控制刷新状态，默认没有 */
    refreshState?: RefreshState,
    /**上啦刷新 */
    onHeaderRefresh?: () => void,
    /**下拉加载 */
    onFooterRefresh?: () => void,
    onEmptyRefresh?: () => React.ReactNode,

    reload?: Function,
    children: React.ReactNode,
    /**内容器样式 */
    style?: React.CSSProperties,
    /**内容器样式 */
    containerStyle?: React.CSSProperties
}

export enum RefreshState {
    Idle = 'Idle',
    HeaderRefreshing = 'HeaderRefreshing',
    FooterRefreshing = 'FooterRefreshing',
    NoMoreData = 'NoMoreData',
    Failure = 'Failure',
    EmptyData = 'EmptyData',
    None = 'None',
}

export default React.forwardRef((props: Prop, refs) => {
    const {
        refreshState = RefreshState.None,
        onHeaderRefresh,
        onFooterRefresh,
        style,
        containerStyle,
    } = props
    const [action, setAction] = React.useState<STATS>(STATS.init)
    const [hasMore, setHasMore] = React.useState<boolean>(true)
    const refReactPullLoad = React.useRef<any>()
    React.useEffect(() => {
        switch (refreshState) {
            case RefreshState.HeaderRefreshing:
                setHasMore(true)
                setAction(STATS.refreshing)
                break;
            case RefreshState.FooterRefreshing:
                setHasMore(true)
                setAction(STATS.loading)
                break;
            case RefreshState.Idle:
                setHasMore(true)
                setAction(STATS.loading)
                onFooterRefresh && onFooterRefresh()
                break;
            case RefreshState.NoMoreData:
            case RefreshState.Failure:
            case RefreshState.None:
            case RefreshState.EmptyData:
                setAction(STATS.reset)
                setHasMore(false)
                break;
            default: break;
        }


    }, [refreshState])


    const hasSubViewsByEmptyDs = () => {
        return props.children == undefined ||
            (props.children instanceof Array && props.children?.length == 0) ||
            (props.children instanceof Array && (props.children?.length == 2 && props.children[0] instanceof Array && props.children[1] == false) && props.children[0]?.length == 0)
    }

    React.useImperativeHandle(refs, () => ({
        getScrollTop: () => {
            if (refReactPullLoad.current) {
                return refReactPullLoad.current?.getScrollTop()
            }
            return 0;
        }
    }), [])

    // console.log('action', action, 'refreshState', refreshState, props.children,)

    return (
        <View
            style={{
                display: 'flex', flex: 1,
                overflow: 'hidden',
                ...style as React.CSSProperties
            }}>
            <ReactPullLoad
                isBlockContainer={true}
                downEnough={150}
                ref={refReactPullLoad}
                action={action}
                hasMore={hasMore}
                distanceBottom={1000}
                style={{ flex: 1 }}
                handleAction={e => {
                    if (action == e) return;
                    if (action == STATS.refreshing) return;
                    if (action == STATS.loading) return;
                    if (action == STATS.init && e == STATS.loading) return;
                    if (action == STATS.reset && e == STATS.loading) return;
                    // console.log('handleAction', e, action, refreshState)
                    setHasMore(true)
                    setAction(e)

                    /**下拉刷新 */
                    if (e == STATS.refreshing) {
                        onHeaderRefresh && onHeaderRefresh()
                        setAction(STATS.reset)
                    }
                    //干拉
                    if (e == STATS.pulling && hasSubViewsByEmptyDs()) {
                        setHasMore(false)
                        setAction(STATS.reset)
                    }

                    /**上拉加载 */
                    if (e == STATS.loading) {
                        onFooterRefresh && onFooterRefresh()
                    }


                }}
                FooterNode={e => {
                    // console.log('FooterNode', e, refreshState)
                    if (e.hasMore == false) {
                        if (refreshState == RefreshState.EmptyData) {
                            if (props.onEmptyRefresh) return props.onEmptyRefresh()
                            return <View style={styles.refreshText}>暂无数据～</View>
                        }
                        if (refreshState == RefreshState.Failure) return <View style={styles.refreshText}>服务器正在出小差，请稍后重试～</View>
                        if (refreshState == RefreshState.NoMoreData) return <View style={styles.refreshText}>已经全部加载完毕</View>
                    }

                    return ''
                }}
            >
                <View style={{ display: 'flex', flexDirection: 'column', ...containerStyle }}>
                    {props.children}
                </View>
            </ReactPullLoad>
        </View>
    )

})


const styles: Record<string, React.CSSProperties> = {
    refreshText: {
        fontSize: '13px',
        color: '#DAD7DA',
        height: '44px',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
    }
}
